import React , { Component } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';
import lazyLoad from './lazyLoad';



// import Home from './view/home';

// const Home = lazyLoad(() => import('./view/home/'));





// import Input from './view/input';
// import Event from './view/event';
// import StoreDemo from './view/storeDemo';
// import Observable from './view/observable';
//app.js
// 路由app.js
// 新加一个路由入口
// 对应视图创建 view/file/index.jsx
// import NewObs from './view/newobs';
// import TestStore from './view/teststore';
// import PageNav from './view/pagenav';
//
// import AjaxPage from './view/ajaxpage';
// import NewPage from './view/newpage';
// import Computed from './view/computed';

const Home = lazyLoad(() => import('./view/home/'));
const Input = lazyLoad(() => import('./view/input/'));
const Event = lazyLoad(() => import('./view/event/'));
const StoreDemo = lazyLoad(() => import('./view/storeDemo/'));
const Observable = lazyLoad(() => import('./view/observable/'));
const NewObs = lazyLoad(() => import('./view/newobs/'));
const TestStore = lazyLoad(() => import('./view/teststore/'));
const PageNav = lazyLoad(() => import('./view/pagenav/'));
const PageNav2 = lazyLoad(() => import('./view/pagenav0/'));
const PageNav3 = lazyLoad(() => import('./view/pagenav1/'));
const AjaxPage = lazyLoad(() => import('./view/ajaxpage/'));
const NewPage = lazyLoad(() => import('./view/newpage/'));
const Computed = lazyLoad(() => import('./view/computed/'));
const Swiper = lazyLoad(() => import('./view/swiper/'));
const Contexts = lazyLoad(() => import('./view/contexts/'));

const Context = lazyLoad(() => import('./view/context/'));
const Context2 = lazyLoad(() => import('./view/context2/'));
const Antd = lazyLoad(() => import('./view/antd/'));
const Hook = lazyLoad(() => import('./view/hook/'));
const Antd2 = lazyLoad(() => import('./view/antd2/'));

const Hook1 = lazyLoad(() => import('./view/hook1/'));
const Hook2 = lazyLoad(() => import('./view/hook2/'));
const HookContext = lazyLoad(() => import('./view/hookcontext/'));
const UseReducer = lazyLoad(() => import('./view/usereducer/'));


const UseContext = lazyLoad(() => import('./view/usecontext/'));

const UReducer = lazyLoad(() => import('./view/ureducer/'));


class App extends Component {
    render(){
        return (
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/input" component={Input} />
                <Route path="/event" component={Event} />
                <Route path="/storedemo" component={StoreDemo} />
                <Route path="/observable" component={Observable} />
                <Route path="/newobs" component={NewObs} />
                <Route path="/teststore" component={TestStore} />
                <Route path="/page" component={PageNav} />
                <Route path="/page2" component={PageNav2} />
                <Route path="/ajaxpage" component={AjaxPage} />
                <Route path="/newpage" component={NewPage} />
                <Route path="/computed" component={Computed} />
                <Route path="/swiper" component={Swiper} />
                <Route path="/contexts" component={Contexts} />
                <Route path="/context" component={Context} />
                <Route path="/context2" component={Context2} />
                <Route path="/antd" component={Antd} />
                <Route path="/hook" component={Hook} />
                <Route path="/antd2" component={Antd2} />
                <Route path="/page4" component={PageNav3} />
                <Route path="/hook1" component={Hook1} />
                <Route path="/hook2" component={Hook2} />
                <Route path="/hookcontext" component={HookContext} />
                <Route path="/usereducer" component={UseReducer} />
                <Route path="/usecontext" component={UseContext} />
                <Route path="/ureducer" component={UReducer} />
                <Redirect to="/"/>

            </Switch>
        );
    }
}
export default App;
